<template>
  <div class="company-box">
    <!-- <topnav></topnav> -->
    <el-card class="box-card">
      <!-- 导航栏 -->
      <el-menu active-text-color="#FF2832" default-active="1" @select="handleSelect">
        <el-menu-item index="1">
          <i class="el-icon-goods" v-if="role===2"></i>
          <span slot="title">店铺管理</span>
        </el-menu-item>
         <el-menu-item index="2" v-if="role===2">
          <i class="el-icon-shopping-cart-full"></i>
          <span slot="title">订单管理</span>
        </el-menu-item>
         <el-menu-item index="3" v-if="role===3">
          <i class="el-icon-s-custom"></i>
          <span slot="title">用户管理</span>
        </el-menu-item>
          <el-menu-item index="4" v-if="role===3">
          <i class="el-icon-reading"></i>
          <span slot="title">商品管理</span>
        </el-menu-item>
         <el-menu-item index="5" v-if="role===3">
          <i class="el-icon-s-tools"></i>
          <span slot="title">分类管理</span>
        </el-menu-item>

      </el-menu>
    </el-card>

    <el-card class="company-body">
      <div v-show="box == '1'">
         <store></store>
      </div>
      <div v-show="box == '2'">
        <order></order>
      </div>
        <div v-show="box == '3'">
        <user></user>
      </div>

        <div v-show="box == '4'">
       <goods></goods>
      </div>
      <div v-show="box == '5'">
          <catagory></catagory>
          </div>
    </el-card>

  </div>
</template>

<script>
import order from './manage/order.vue'
import store from './manage/store.vue'
import User from './manage/user.vue'
import Goods from './manage/goods.vue'
import Catagory from './manage/catagory.vue'

// import topnav from '../components/topnav.vue'
/**
   * description  公司页面
   */
export default {
  name: 'core',
  components: {
    order,
    store,
    User,
    Goods,
    Catagory
  },
  computed: {

  },
  data () {
    return {
      box: '1',
      role: ''
    }
  },
  methods: {
    // 导航栏按钮点击
    handleSelect (key, keyPath) {
      this.box = key
    }
  },
  created () {
    this.role = JSON.parse(localStorage.getItem('userMsg')).role
  }
}
</script>

<style scoped>
  .company-box {
    width: 1200px;
    margin: 0 auto;
    height: 600px;
    /* position: absolute; */
  }

  .box-card {
    width: 267px;
    margin: -2px;
    float: left;
    /* margin-top: 20px; */
  }

  .el-menu {
    border-right: solid 0px #e6e6e6;
  }

  .company-body {
    margin-left: 270px;
    height: 100%;
    overflow: auto;
  }
</style>
